<template>
  <div>
    <a-modal v-model:open="open" title="图片裁剪" @ok="handleOk" @cancel="p.reject()">
      <div style="width: 100%;height: 500px">
        <vue-cropper
            :style="{width: '100%', height: '100%'}"
            ref="cropperRef"
            :img="computedOption.img"
            :outputSize="computedOption.outputSize"
            :outputType="computedOption.outputType"
            :info="computedOption.info"
            :canScale="computedOption.canScale"
            :autoCrop="computedOption.autoCrop"
            :autoCropWidth="computedOption.autoCropWidth"
            :autoCropHeight="computedOption.autoCropHeight"
            :fixedBox="computedOption.fixedBox"
            :fixed="computedOption.fixed"
            :fixedNumber="computedOption.fixedNumber"
            :canMove="computedOption.canMove"
            :canMoveBox="computedOption.canMoveBox"
            :original="computedOption.original"
            :centerBox="computedOption.centerBox"
            :infoTrue="computedOption.infoTrue"
            :full="computedOption.full"
            :enlarge="computedOption.enlarge"
            :mode="computedOption.mode"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import 'vue-cropper/dist/index.css'
import {VueCropper} from "vue-cropper";
import {reactive, ref, computed} from "vue";

const open = ref(false);
const cropperRef = ref()

let p = {
  resole: null,
  reject: null
}

const option = reactive({
  img: '', // 裁剪图片的地址 url 地址, base64, blob
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
  info: true, // 裁剪框的大小信息
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 500, // 默认生成截图框宽度
  autoCropHeight: 500, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: true, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
  fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
  canMove: true, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  full: true, // 是否输出原图比例的截图
  enlarge: '1', // 图片根据截图框输出比例倍数
  mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
})

const props = defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
});

const computedOption = computed(() => {
  return {
    ...option,
    ...props.option,
  }
})
const openUpload = (url) => {
  option.img = url
  open.value = true;
  return new Promise((resole, reject) => {
    p.resole = resole
    p.reject = reject
  })
};
const handleOk = () => {
  open.value = false;
  cropperRef.value.getCropBlob(async (data) => {
    p.resole(data)
  })
};
defineExpose({
  openUpload,
});
</script>

<style lang="scss" scoped>
</style>
